<template>
    <van-nav-bar title="分类" />
    <h2>最新商品分类</h2>
    <van-tree-select
        v-model:main-active-index="activeIndex"
        height="90%"
        :items="categoryList"
        @click-nav="bindClickNav"
    >
        <template #content>
            <!-- <van-card
                v-for="item in goodsList"
                :key="item.id"
                :price="item.price"
                :title="item.product"
                :thumb="item.picture"
            /> -->
            <van-grid :border="false" :column-num="3">
                <van-grid-item v-for="item in goodsList" :key="item.id" @click="bindDetail(item.id)">
                    <div class="g-goods">
                        <img :src="item.picture" :alt="item.product" />
                        <p>{{ item.product }}</p>
                    </div>
                </van-grid-item>
            </van-grid>
        </template>
    </van-tree-select>
</template>

<script setup lang="ts">
import { useCategory } from '@/hooks/category'
const { activeIndex, categoryList, goodsList, bindClickNav,bindDetail } = useCategory()
</script>

<style lang="scss" scoped>
.g-goods {
    img {
        width: 60px;
        height: 60px;
    }
    p {
        max-width: 60px;
        white-space: nowrap;
        overflow: hidden; //文本超出隐藏
        text-overflow: ellipsis; //文本超出省略号替代
    }
}
</style>
